<template>
  <q-page :padding="!$q.platform.is.mobile">

    <q-inner-loading visible v-if="model.noticeId < 0">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading> 

    <!-- info -->
    <q-list-header class="row" v-if="model.noticeId>0">
        <span class="col">票码豆油详情</span>
        <span v-if="model.status<=0" class="col-auto" @click="$router.push('/doumail-code/edit/'+model.noticeId)">
          <q-icon name="mdi-settings" />
        </span>
    </q-list-header>
    <q-list separator sparse class="q-py-none" :no-border="$q.platform.is.mobile" v-if="model.noticeId>0">
      <q-item>
        <q-item-side>影片名称：</q-item-side>
        <q-item-main>{{model.title}}</q-item-main>
      </q-item>

      <q-item>
        <q-item-side>豆油内容：</q-item-side>
        <q-item-main>
          你好，你报名《{{model.title}}》豆瓣观影活动，获得影片兑换码一张。<br/>
          电子兑换码为：xxxxxx <br/>
          请及时兑换，看完记得写评论哦：）
        </q-item-main>
      </q-item>
    </q-list>
      
    <!-- user list -->
    <q-list-header class="row" v-if="users.length>0">
        <span class="col">豆瓣ID及票码</span>
        <span class="col-auto" v-if="model.status==0&&users.length>0">(共 <b class="text-primary">{{users.length}}</b> 人)</span>
        <span class="col-auto" v-if="model.status>0&&nosend>0">(已发送:<b class="text-green">{{sended}}</b>人，未发送:<b class="text-primary">{{nosend}}</b>人)</span>
        <span class="col-auto" v-if="model.status>0&&nosend==0">(全部发送:<b class="text-green">{{sended}}</b>人)</span>
    </q-list-header>
    <q-list separator class="q-py-none" :no-border="$q.platform.is.mobile" v-if="users.length>0">
      <q-item v-for="item in users" :key="'phone_'+item.userId">
        <q-item-main>
          <q-item-tile label>{{item.userId}}</q-item-tile>
          <q-item-tile sublabel v-if="item.userName">昵称：{{item.userName}}</q-item-tile>
        </q-item-main>
        <q-item-side>{{item.userConfig}}</q-item-side>
        <q-item-side>
          <span v-if="item.status==0"><small><b class="text-primary">未发送</b></small></span>
          <span v-if="item.status==1"><small><b class="text-green">已发送</b></small></span>
        </q-item-side>
      </q-item>
    </q-list>

    <!-- send -->
    <q-btn v-if="model.status==0&&test" color="secondary" class="fixed" icon="mdi-send" label="测试发送"
      :loading="loading" style="right: 15px; bottom: 15px" @click="testSend"/>

    <q-btn v-if="model.status==0&&!test" color="primary" class="fixed" icon="mdi-send" label="正式发送"
      :loading="loading" style="right: 15px; bottom: 15px" @click="send" />

    <q-btn v-if="model.status==1&&nosend>0" color="primary" class="fixed" icon="mdi-send" label="继续发送"
      :loading="loading" style="right: 15px; bottom: 15px" @click="send" />

  </q-page>
</template>

<script>
export default {
  name: 'PageDoumailCodeView',
  data() {
    return {
      loading: false,
      test: true,
      nosend: 0,
      sended: 0,
      model : {
        noticeId : -1,
        status: -1
      },
      users:[]
    }
  },
  mounted() {
    let me = this;
    me.loadModel(this.$route.params.id);
    me.loadUsers(this.$route.params.id);
    this.$api.ui.pageBackBtn = function(){
      me.$router.push('/doumail-code');
    }
  },
  methods: {
    loadModel(id) {
      let me = this;
      this.$api.notice.loadOne(id, res=>{
        me.model = res.data.model;
      });
    },
    loadUsers(id) {
      let me = this;
      this.$api.notice.loadUsers(id, res=>{
        me.users = res.data.model;
        me.nosend = 0;
        me.sended = 0;
        for(let i = 0; i < me.users.length; i++) {
          if(me.users[i].status <= 0) {
            me.nosend += 1;
          } else {
            me.sended += 1;
          }
        }
      });
    },
    send() {
      let me = this;
      let noticeId = me.model.noticeId;
      me.loading = true;
      me.$api.notice.sendDoumailCode(noticeId, res=>{
        me.$q.notify({ message: '豆油已发送，成功:' + res.data.model });
        me.loadUsers(noticeId);     
        me.model.status = 1;   
        me.loading = false;
      }, err=>{
        me.loadUsers(noticeId);
        me.loading = false;
      })
    },
    testSend() {
      let me = this;
      me.loading = true;
      me.$api.notice.testDoumailCode(me.model.noticeId, res=>{
        me.$q.notify({ message: '测试豆油已成功发送', type: 'positive' });
        me.test = false;
        me.loading = false;
      }, err=>{
        me.loading = false;
      })
    }
  }
}
</script>

